// import _getHash from "./_getHash";
// import setNewAttributesIfValid from './setNewAttributesIfValid';
// import setAttributesIfNecessary from "./setAttributesIfNecessary";

function _getHash(annotationUID, drawingElementType, nodeUID) {
	return `${annotationUID}::${drawingElementType}::${nodeUID}`;
}

function setNewAttributesIfValid(attributes, svgNode) {
	Object.keys(attributes).forEach(key => {
		const newValue = attributes[key];
		if (newValue !== undefined && newValue !== "") {
			svgNode.setAttribute(key, newValue);
		}
	});
}

function setAttributesIfNecessary(attributes, svgNode) {
	Object.keys(attributes).forEach(key => {
		const currentValue = svgNode.getAttribute(key);
		const newValue = attributes[key];
		if (newValue === undefined || newValue === "") {
			svgNode.removeAttribute(key);
		} else if (currentValue !== newValue) {
			svgNode.setAttribute(key, newValue);
		}
	});
}

function drawHandlesSvg(
	svgDrawingHelper,
	annotationUID,
	handleGroupUID,
	handlePoints,
	options = {}
) {
	handlePoints.forEach((handle, i) => {
		drawHandle(
			svgDrawingHelper,
			annotationUID,
			handleGroupUID,
			handle,
			options,
			i
		);
	});
}

function drawHandle(
	svgDrawingHelper,
	annotationUID,
	handleGroupUID,
	handle,
	options = {},
	uniqueIndex
) {
	const { color, handleRadius, width, lineWidth, fill, type, opacity } =
		Object.assign(
			{
				color: "rgb(0, 255, 0)",
				handleRadius: "6",
				width: "2",
				lineWidth: undefined,
				fill: "transparent",
				type: "circle", //type: 'circle|rect|path',
				opacity: 1
			},
			options
		);

	// console.log('drawHandle', type);
	// for supporting both lineWidth and width options
	const strokeWidth = lineWidth || width;

	// variable for the namespace
	const svgns = "http://www.w3.org/2000/svg";
	const svgNodeHash = _getHash(
		annotationUID,
		"handle",
		`hg-${handleGroupUID}-index-${uniqueIndex}`
	);

	let attributes;
	if (type === "circle") {
		attributes = {
			cx: `${handle[0]}`,
			cy: `${handle[1]}`,
			r: handleRadius,
			stroke: color,
			fill,
			"stroke-width": strokeWidth,
			opacity: opacity
		};
	} else if (type === "rect") {
		const handleRadiusFloat = parseFloat(handleRadius);
		const side = handleRadiusFloat * 1.5;
		const x = handle[0] - side * 0.5;
		const y = handle[1] - side * 0.5;

		attributes = {
			x: `${x}`,
			y: `${y}`,
			width: `${side}`,
			height: `${side}`,
			stroke: color,
			fill,
			"stroke-width": strokeWidth,
			rx: `${side * 0.1}`,
			opacity: opacity
		};
	} else if (type === "path") {
		// qinwl add
		const handleRadiusFloat = parseFloat(handleRadius);
		const side = handleRadiusFloat * 2.0;
		const x = handle[0] - side * 0.5;
		const y = handle[1] - side * 0.5;
		const d = `M ${x} ${handle[1]} L ${x + side} ${handle[1]} M ${
			handle[0]
		} ${y} L ${handle[0]} ${y + side}`;
		// console.log('drawHandle d', d);
		attributes = {
			d,
			stroke: color,
			fill,
			"stroke-width": strokeWidth,
			opacity: opacity
		};
	} else {
		throw new Error(`Unsupported handle type: ${type}`);
	}

	const existingHandleElement = svgDrawingHelper.getSvgNode(svgNodeHash);

	if (existingHandleElement) {
		setAttributesIfNecessary(attributes, existingHandleElement);

		svgDrawingHelper.setNodeTouched(svgNodeHash);
	} else {
		const newHandleElement = document.createElementNS(svgns, type);

		setNewAttributesIfValid(attributes, newHandleElement);

		svgDrawingHelper.appendNode(newHandleElement, svgNodeHash);
	}
}

// export { drawHandleEx, drawHandlesSvg };
export default drawHandlesSvg;
